<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>纯CSS3红色爱心跳动动画DEMO演示</title>

<style type="text/css">
body {
		background: black;
}

.heart {
		margin: 100px auto;
		width: 200px;
		height: 200px;
		/* border: 1px solid #0094ff; */
		position: relative;
		animation-name: shake;
		animation-duration: .5s;
		animation-iteration-count: infinite;
}

.heart div {
		/* border: 1px solid #0094ff; */
		width: 100%;
		height: 100%;
		position: absolute;
		background: pink;
		animation-name: shadow;
		animation-duration: .5s;
		animation-iteration-count: infinite;
}

.topLeft,
.topRight {
		border-radius: 100px 100px 0 0;
}

.topLeft {
		transform: translate(-50px, 0) rotate(-45deg);
}

.topRight {
		transform: translate(50px, 0) rotate(45deg);
}

.bottom {
		transform: translate(0, 64px) rotate(45deg) scale(.9, .9);
}
/* 定义动画 */

@keyframes shake {
		from {
				  transform: scale(.9, .9);
		}
		to {
				  transform: scale(1.1, 1.1);
		}
}

@keyframes shadow {
		from {}
		to {
				  box-shadow: 0px 0px 50px pink;
		}
}
</style>
</head>

<body>

<div class="heart">
	<div class='topLeft'></div>
	<div class='topRight'></div>
	<div class='bottom'></div>
</div>
<br /><br /><br />
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>

</body>
</html>

